<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="utf-8" />  
    <title>ECharts-基本线性图及其配置要求</title>  
    <!-- ECharts单文件引入 -->
<script src="js/echarts.js"></script> 
</head>  
<body>  
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="box" style="height:400px;width: 800px;padding: 20px"></div>
    </div>  
    <script>
    // 获取到这个DOM节点，然后初始化

    var myChart = echarts.init(document.getElementById("box"));
    var colors = ['#57617B', '#57617B', '#57617B', 'black'];
   var  option = {
    color: colors,
    backgroundColor: '#313642',
    // title: {
    //     text: "趣看直播实时视频质量分析",
    //     textStyle: {
    //         fontWeight: 'normal',
    //         fontSize: 16,
    //         color: '#F1F1F3'
    //     },
    // },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },

    legend: {
        itemWidth: 14,
        itemHeight: 5,
        itemGap: 13,
        data: ['沪深300指数', '股票仓位(%)'],
        right: '40%',
        textStyle: {
            fontSize: 12,
            color: '#F1F1F3'
        }
    },
    grid: {
        left: '5%',
        right: '10%',
        bottom: '16%',
        top: '20%',
        containLabel: true
    },

    toolbox: {
        feature: {
            dataView: {
                show: false,
                readOnly: false
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },

    dataZoom: [{
        show: false,
        start: 0,
        end: 80,
        bottom: '8%'
    }, ],
    xAxis: [{

        type: 'category',
        boundaryGap: false,
        axisLine: {
            lineStyle: {
                color: '#FFFFFF'
            }
        },
        data: ['2018年2月', '2018年4月', '2018年6月', '2018年8月', '2018年10月']
    }],
    yAxis: [{
        type: 'value',
        name: '沪深300指数',
        min: 2600,
        max: 3600,
        position: 'right',
        axisLine: {
            lineStyle: {
                color: colors[2]
            }
        },
        axisLabel: {
            formatter: '{value} '
        },
        splitLine: {
            lineStyle: {
                color: '#57617B'
            }
        },
    }, {
        type: 'value',
        name: '股票仓位(%)',
        min: 0,
        max: 100,
        position: 'left',
        offset: 0,
        axisLine: {
            lineStyle: {
                color: colors[0]
            }
        },
        splitLine: {
            lineStyle: {
                color: '#57617B'
            }
        },
        axisLabel: {
            formatter: '{value} %'
        }
    }],
    series: [{
        name: '沪深300指数',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                width: 1
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#266FDD'
                }, {
                    offset: 0.8,
                    color: 'rgba(219, 50, 51, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
            }
        },
        itemStyle: {
            normal: {

                color: '#266FDD',
                borderColor: 'rgba(219,50,51,0.2)',
                borderWidth: 12
            }
        },
        data: [3000, 3100, 3500, 3400,3000]
    }, {
        name: '股票仓位(%)',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                width: 1,
                color:"#A75E24"
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#A75E24'
                }, {
                    offset: 0.8,
                    color: 'rgba(0, 136, 212, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
            }
        },
        itemStyle: {
            normal: {
                color: 'rgb(0,136,212)',
                borderColor: 'rgba(0,136,212,0.2)',
                borderWidth: 12

            }
        },
        yAxisIndex: 1,
        data: [50, 60, 70, 30,40]
    }]
};

    myChart.setOption(option);
</script>
</body>  
</html>  